<template>
  <div style="height: 100%;">

    <el-row style="height: 100%;"
            class="content-item">
      <el-col :span="12"
              class="borderBox">
        <p>学校用户</p>
        <el-table :data="userList"
                  class="table-header-gray"
                  highlight-current-row
                  ref="singleTable"
                  @current-change="handleCurrentChange"
                  style="width: 100%">
          <el-table-column property="sn"
                           label="工号">
          </el-table-column>
          <el-table-column property="name"
                           label="姓名">
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12"
              class="borderBox">
        <p>分管校区</p>
        <el-checkbox-group v-model="areaChecked"
                           v-if="schoolAreaList.length">
          <el-checkbox v-for="(item, index) in schoolAreaList"
                       :key="index"
                       :label="item.schoolAreaId">{{item.schoolAreaName}}</el-checkbox>
        </el-checkbox-group>
        <el-button type="primary"
                   style="margin-top: 20px;"
                   size="small"
                   @click="save">保存</el-button>

      </el-col>
    </el-row>
  </div>
</template>
<script>
import {
  _getlistSchoolUser,
  _getlistSchoolAreaBySn,
  _addOrUpdateSchoolAreaToSn
} from '@api/systemManage'
export default {
  data () {
    return {
      sn: null,
      areaChecked: [],
      userList: [],
      schoolAreaList: []
    }
  },
  methods: {
    // 保存
    save () {
      console.log(this.areaChecked)
      let params = []
      this.schoolAreaList.forEach(ele => {
        if (this.areaChecked.some(item => {
          return item === ele.schoolAreaId
        })) {
          params.push({
            checkStatus: 1,
            id: ele.id,
            schoolAreaId: ele.schoolAreaId,
            schoolAreaName: ele.schoolAreaName,
            sn: ele.sn
          })
        } else {
          params.push({
            checkStatus: 0,
            id: ele.id,
            schoolAreaId: ele.schoolAreaId,
            schoolAreaName: ele.schoolAreaName,
            sn: ele.sn
          })
        }
      })
      _addOrUpdateSchoolAreaToSn(params).then(res => {
        this.$message.success('保存成功')
      })
    },
    // 校区分管-查询所有学校用户的sn
    getlistSchoolUser () {
      _getlistSchoolUser().then(res => {
        this.userList = res.data
        if (res.data.length) {
          this.handleCurrentChange(res.data[0])
          this.getlistSchoolAreaBySn(res.data[0].sn)
        }
      })
    },
    // 校区分管-根据用户sn查询管理的校区
    getlistSchoolAreaBySn (sn) {
      _getlistSchoolAreaBySn(sn).then(res => {
        this.schoolAreaList = res.data
        this.areaChecked = []
        res.data.forEach(ele => {
          if (ele.checkStatus) {
            this.areaChecked.push(ele.schoolAreaId)
          }
        })
        console.log(this.areaChecked)
      })
    },
    handleCurrentChange (val) {
      this.sn = val.sn
      this.$refs.singleTable.setCurrentRow(val)
      this.getlistSchoolAreaBySn(val.sn)
    }
  },
  mounted () {
    this.getlistSchoolUser()
  }
}
</script>
<style lang="less" scoped>
.borderBox {
  border: 1px solid #cccccc;
  display: block;
  padding: 10px;
  height: 100%;
  overflow: auto;
}
</style>
